<template>
  <a-drawer
    title="数据权限规则"
    :width="drawerWidth"
    @close="onClose"
    :visible="visible">

    <!-- 抽屉内容的border -->
    <div
      :style="{
        padding:'10px',
        border: '1px solid #e9e9e9',
        background: '#fff',
      }">
      <div class="table-page-search-wrapper">
        <a-form @keyup.enter.native="searchQuery">
          <a-row :gutter="12">
            <a-col :md="8" :sm="8">
              <a-form-item label="数据" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
                <j-input v-model="queryParam.dataContent"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="修改人" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
                <j-input v-model="queryParam.createBy"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="7" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>

        <a-table
          ref="table"
          rowKey="id"
          size="middle"
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading">
          <span slot="action" slot-scope="text, record">
            <a @click="handleCompare(record)">
              数据对比
            </a>
          </span>
        </a-table>

      </div>
    </div>
    <data-log-compare-bus-modal ref="modal" @ok="modalFormOk" ></data-log-compare-bus-modal>
  </a-drawer>
</template>
<script>
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import { getAction } from '@/api/manage'
  import JInput from '@/components/jeecg/JInput.vue'
  import DataLogCompareBusModal from '@/views/system/modules/DataLogCompareBusModal.vue'

  const columns = [
    {
      title: '#',
      dataIndex: 'dataVersion',
      key: 'dataVersion',
      width: 50,
    },
    /*{
      title: '数据内容',
      dataIndex: 'dataContent',
      key: 'dataContent',
      ellipsis: true,
    },*/
    {
      title: '更新人',
      dataIndex: 'createBy',
      key: 'createBy',
      width: 100,
    },
    {
      title: '更新时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 150,
    },
    {
      title: '操作',
      dataIndex: 'action',
      scopedSlots: {customRender: 'action'},
      align: 'center'
    }
  ]

  export default {
    name: 'DataLogBusList',
    mixins: [JeecgListMixin],
    components: {
      JInput,
      DataLogCompareBusModal,
    },
    props: {
      tableName: {
        type: String,
        required: true
      },
    },
    data() {
      return {
        queryParam: {},
        drawerWidth: 650,
        columns: columns,
        dataId: '',
        visible: false,
        loading: false,
        url: {
          list: "/sys/dataLog/list",
          queryTableInfo: "/sys/dataLog/queryTableInfo",
        },
        curRecord: {},
        tableInfo: [],
      }
    },
    created() {
      this.resetScreenSize()
    },
    methods: {
      getData(dataId) {
        this.dataId = dataId
        this.visible = true
        let that = this
        this.dataSource = []
        var params = this.getQueryParams()//查询条件
        params.dataId = this.dataId
        getAction(this.url.list, params).then((res) => {
            if (res.success) {
              that.dataSource = res.result.records
              that.dataSource.splice(0,1);
            } else {
              this.$message.warning(res.message)
            }
        }).finally(() => {
        })
      },
      getTableInfo(tableName) {
        this.tableName = tableName
        var params = {}
        params.tableName = tableName
        getAction(this.url.queryTableInfo, params).then((res) => {
          if (res.success) {
            this.tableInfo = res.result
            this.tableInfo.forEach(rowData =>{
              let fieldName = rowData.Field
              fieldName = this.toHump(fieldName)
              rowData.Field = fieldName
            })
            console.log(this.tableInfo)
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
        })
      },
      edit(record) {
        this.curRecord  = record
        this.getData(record.id)
        this.getTableInfo(this.tableName)
        this.resetScreenSize()
      },
      handleCompare(record) {
        this.$refs.modal.compareModal(this.curRecord, record, this.tableInfo);
        this.$refs.modal.title="数据比较";
      },
      searchQuery() {
        this.getData(this.curRecord.id)
      },
      searchReset() {
        this.queryParam = {}
        this.getData(1);
      },
      onClose() {
        this.visible = false
      },
      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize() {
        let screenWidth = document.body.clientWidth
        if (screenWidth < 500) {
          this.drawerWidth = screenWidth
        } else {
          this.drawerWidth = 650
        }
      },
      // 下划线转换驼峰
      toHump(name) {
        return name.replace(/\_(\w)/g, function(all, letter){
          return letter.toUpperCase();
        });
      },
      // 驼峰转换下划线
      toLine(name) {
        return name.replace(/([A-Z])/g,"_$1").toLowerCase();
      },
    }
  }
</script>

<style>
  .data-rule-invalid{
    background: #f4f4f4;
    color: #bababa;
  }
</style>